

<!-- 水券交易明细 -->
<template>
	<view class="content">
		<view v-if="messages && messages.length" class="all_blocks">
			<view class="block" v-for="item of messages" :key="item.id" @click="test(item)">
				<view class="left">
					<view class="name ellipsis1">{{item.des}}</view>
					<view class="time">{{item.time}}</view>
				</view>
				<view class="right">
					<view>
						<view :class="item.ioFlag != '1'?'price':'price2'">
							<text v-if="item.ioFlag != '1'">+</text>
							<text v-if="item.ioFlag == '1'">-</text>
							<text v-if="balanceType == '4'">
								{{item.amount}}
							</text>
							<text v-else>
								{{item.amount / 100}}
							</text>
						</view>
					<view class="state" v-if="item.status === '0'">处理中</view>
					<view class="state2" v-if="item.status === '10'">已完成</view>
					</view>
				</view>
			</view>
		</view>
		<g-empty v-else></g-empty>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				icon: {
				},
				
				balanceType: "",
				messages:[],
				
				//分页相关
				pageNum: 1,
				pageSize: 10
			};
		},
		onLoad(options) {
			let that = this;
			// 账户类型
			let balanceType = '';
			if(options.type == 'jifen'){
				balanceType = '4';
			}else if(options.type == 'yue'){
				balanceType = '0';
			}else if(options.type == 'shuijuan'){
				balanceType = '10';
			}
			
			that.balanceType = balanceType;
			that.getPageList_fun();
		},
		methods: {
			
			test(item){
				console.log(item)
			},
			// 时间戳转换日期--补0--毫秒
			timestampToTime(timestamp) {
				var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				var D = date.getDate() < 10 ?  '0'+date.getDate()+ ' ' : date.getDate()+ ' ';
				var h = date.getHours() < 10 ? '0'+date.getHours()+ ':' : date.getHours()+ ':';
				var m = date.getMinutes() < 10 ? '0'+date.getMinutes()+ ':' : date.getMinutes()+ ':';
				var s = date.getSeconds()< 10 ? '0'+date.getSeconds() : date.getSeconds();
				return Y+M+D+h+m+s;
			},
			
			
			//分页数据
			getPageList_fun() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/AccountBalanceApi/findAccountBalanceDetailByCustomerIdForApi',
					method: 'POST',
					data:{
						ioFlag: null,
						balanceType: that.balanceType,
						pageNum: that.pageNum,  //页码
						pageSize: that.pageSize //显示条数
					},
					success: function(res) {
						for(let i of res.data.response.results){
							i.time = that.timestampToTime(i.time);
						}
						if(that.pageNum-0 > 1){
							for(let i of res.data.response.results){
								that.messages.push(i);
							}
						}else {
							that.messages = res.data.response.results;
						}
						console.log(that.messages.results)
					}
				});
			},
			
			
			onPullDownRefresh() {
				var that = this;
				that.pageNum = 1;
				
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1500);
				
				that.getPageList_fun();
			},
			onReachBottom() {
				var that = this;
				that.pageNum = that.pageNum + 1;
				
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1500);
				
				that.getPageList_fun();
			}
		}
	}
</script>

<style lang="less">
	page,
	.content {
		background: #F5F5F5;
		height: 100%;
	}
	.all_blocks{
		margin-top: 20rpx;
		background-color: white;
		width: 100%;
		border-radius: 16rpx;
		padding-left: 30rpx;
		.block:last-child{
			border-bottom: none;
		}
		.block{
			border-bottom: 1rpx solid #eee;
			width: 690rpx;
			height: 141rpx;
			display: flex;
			align-items: center;
			.left{
				width: 50%;
				height: 100%;
				padding-top: 30rpx;
				.name{
					color: #333333;
					font-size: 26rpx;
				}
				.time{
					color: #999999;
					font-size: 22rpx;
					margin-top: 20rpx;
				}
			}
			.right{
				width: 50%;
				height: 100%;
				padding-top: 30rpx;
				display: flex;
				flex-direction: row-reverse;
				.price{
					text-align: right;
					color: #E01327;
					font-size: 34rpx;
					font-weight: bold;
				}
				.price2{
					text-align: right;
					color: #000;
					font-size: 34rpx;
					font-weight: bold;
				}
				.state{
					color: #333333;
					font-size: 20rpx;
					margin-top: 18rpx;
					text-align: right;
				}
				.state2{
					color: #ADADAD;
					font-size: 20rpx;
					margin-top: 18rpx;
					text-align: right;
				}
			}
		}
	}
</style>



